
{extend name='index/main'}

{block name='main'}
<div class="layui-box">
    <form class="layui-form " action="{:url('models/edit_action')}" method="post" lay-filter="models_form">
        <fieldset class="layui-elem-field" >
            <legend>模型基本信息</legend>
            <div class="layui-field-box" >
                {:CMaker('text')->label('模型中文名')->name('models_name')->value($models['models_name'])->helpinfo('中文')->layVerify('required')->render()}
                {:CMaker('text')->label('模型英文名')->name('table_name')->value($models['table_name'])->helpinfo('英文字母')->layVerify('required')->render()}
                {:CMaker('text')->label('模型主键')->name('primary[name]')->value($models['primary_name'])->helpinfo('英文字母,默认id')->layVerify('required')->render()}
                {:CMaker('select')->label('主键类型')->name('primary[type]')->option(['int'=> 'int','varchar' => 'varchar','char' => 'char'])->choose($models['primary_type'])->layVerify('required')->render()}
                {:CMaker('number')->label('主键长度')->name('primary[length]')->value($models['primary_length'])->layVerify('required')->render()}
                {:CMaker('select')->label('生成方案')->helpinfo('')->name('tpl_plan')->option($tpl_plan)->choose($models['tpl_plan'])->layVerify('required')->render()}
                {:CMaker('hidden')->name('models_id')->value($models['id'])->render()}

            </div>
        </fieldset>



        <fieldset class="layui-elem-field" style="width: 50%;float: left;">
            <legend>模型表单预览</legend>
            <div class="layui-field-box dragula" style="min-height: 300px;">

                {$componet|raw}

            </div>
        </fieldset>


        <fieldset class="layui-elem-field"  style="width: 45%;float: right;padding:10px;">
            <legend>表单组件</legend>

            <div class="layui-tab layui-tab-brief" lay-filter="component">
                <ul class="layui-tab-title">
                    <li class="layui-this">输入组件</li>
                    <li>选择组件</li>
                    <li>上传组件</li>

                </ul>
                <div class="layui-tab-content" style="height: 100px;">
                    <div class="layui-tab-item dragula layui-show ">
                        {:CMaker('text')->render()}
                        {:CMaker('number')->render()}
                        {:CMaker('daterange')->render()}
                        {:CMaker('ueditor')->show('simple')->render()}
                    </div>
                    <div class="layui-tab-item dragula">
                        {:CMaker('select')->render()}
                        {:CMaker('checkbox')->render()}
                        {:CMaker('radio')->render()}
                        {:CMaker('switchs')->render()}
                        {:CMaker('relation')->render()}
                    </div>
                    <div class="layui-tab-item dragula">
                        {:CMaker('webuploader')->label('上传组件')->auto(true)->helpinfo('可选择图片上传或文件上传')->render()}

                    </div>

                </div>
            </div>


        </fieldset>


        <div class="layui-form-item" style="margin-left: 36%">
            <div class="layui-input-inline ">
                <button class="layui-btn"  lay-submit>提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>


<script type="text/javascript" src="__PLUGIN_PATH__/layui/layui.js"></script>
<script type="text/javascript" src="__PLUGIN_PATH__/lay-extend-module/config.js"></script>
<link rel="stylesheet" href="__PLUGIN_PATH__/dragula/dist/dragula.min.css">
<script src="__PLUGIN_PATH__/dragula/dist/dragula.min.js"></script>

{:CMakerJs('all')}

<script>


    var form,$,layer,link,drake;

    layui.use(['layer','linkHandler','form'],function () {
            form  = layui.form
            ,$ = layui.jquery
            ,layer = layui.layer
            ,link = layui.linkHandler;


            drake = dragula({
                removeOnSpill:true,
                copy: function (el, source) {
                    //复制的来源不是第一个容器
                    return source !== this.containers[0];
                },
                accepts: function (el, target) {
                    //接收复制的容器为第一个容器
                    return target === this.containers[0];
                },
            })
            //压入容器
            $('.dragula').each(function (i,n) {
                drake.containers.push(n);
            });

            //编辑页面
            $(drake.containers[0]).find('.layui-form-item').each(function(i,n){

                var button_clone = $(n).next('.layui-input-inline').clone();
                var hidden_clone = $(n).next().next('.hidden_list').children().clone();
                button_clone.css('display','block');
                $(n).append(button_clone);
                $(n).append(hidden_clone);
                $(n).next().next('.hidden_list').remove();
                $(n).next('.layui-input-inline').remove();


            });

            //选中放下的时候
            drake.on('drop',function (el, target, source) {

                if(source != this.containers[0]){

                    var component_name = $(el).attr('component-name');
                    var oldid = $(el).find('.'+component_name).attr('id');

                    //重新渲染组件

                    reload_component_render($(el),component_name,oldid);


                    //统一修改表单的显示形式为inline
                    $(el).find('.layui-input-block').addClass('layui-input-inline').removeClass('layui-input-block');
                    //添加编辑按钮
                    $(el).append('<div class="layui-input-inline"><a style="float:right" href="javascript:;" onclick="showsetting(this)"  class="layui-btn" ><i class="fa fa-edit"></i>编辑</a></div>');
                    $(el).append('<input type="hidden" class="__form_order" name="form_order[]" value="">');
                    $(el).append('<input type="hidden" class="__component_name" name="component_name[]" value="'+component_name+'">');


                }

                //每次拖拽改变form-order hidden 的index值
                $(this.containers[0]).find('.layui-form-item').each(function(i,n){

                    var index = $(n).index();

                    $(n).find('input[type=hidden]').each(function(si,sn){
                        var newname = $(sn).attr('name').replace(/\[\d?\]/,'['+index+']');
                        $(sn).attr('name',newname);
                        if(newname.match(/form_order/)){
                            $(sn).attr('value',index);
                        }
                    });
                });


            });
            //删除组件的时候也同时改变form-order hidden 的index值
            drake.on('remove',function (el, container, source) {
                var componet = new Array;
                $(this.containers[0]).find('.layui-form-item').each(function(i,n){
                    var index = $(n).index();
                    $(n).find('input[type=hidden]').each(function(i,n){
                        var newname = $(n).attr('name').replace(/[\d+]/,index);
                        $(n).attr('name',newname);
                        if(newname.match(/form_order/)){
                            $(n).attr('value',index);
                        }
                    });
                })

            });



    });


    //打开组件设置界面
    function showsetting(el){

        var type = $(el).parents('.layui-form-item').find('.__component_name').attr('value') ? $(el).parents('.layui-form-item').find('.__component_name').attr('value') : $(el).parent().next('.hidden_list').find('.__component_name').attr('value');
        var order = $(el).parents('.layui-form-item').find('.__form_order').attr('value') ? $(el).parents('.layui-form-item').find('.__form_order').attr('value') : $(el).parent().next('.hidden_list').find('.__form_order').attr('value');
        var setting = $(el).parents('.layui-form-item').find('.__setting').attr('value') ? $(el).parents('.layui-form-item').find('.__setting').attr('value') : $(el).parent().next('.hidden_list').find('.__setting').attr('value');


        if(typeof  setting != 'undefined'){
            var url = '{:url("models/get_model_form")}'+ "?component_name="+type + '&form_order='+ order + '&setting='+setting;
        }else{
            var url = '{:url("models/get_model_form")}'+ "?component_name="+type + '&form_order='+ order ;
        }


        parent.layer.open({
            type: 2
            ,anim: 4
            ,maxmin: true
            ,area: ['80%', '46rem']
            ,title: '表单组件设置'
            ,content: url,
        });
    }


    /**
     * 重新渲染组件
     * 左边组件拖入右边会触发
     * 编辑组件属性成功之后会触发
     * @param el
     * @param component_name
     * @param oldid
     * @param attrset 组件的设置选项
     *
     */
    function reload_component_render(el,component_name,oldid ,attrset ){

        //如果有组件脚本的 则 重新渲染
        if((oldid+'_attr' in window)){

            $(el).find('.'+component_name).removeAttr('lay-key');
            var newid = component_name+'_'+parseInt(Math.random()*100000);


            //如果有传入的attrset选项 则使用传入的
            if(typeof attrset == 'object'){
                var setting = attrset;
                var find_id =  setting.uniqid_id
            }else{
                var setting = window[oldid+'_attr'];
                var find_id = oldid;
            }

            //组件内有多个组件class的时候替换 id
            $(el).find('.'+component_name).each(function(i,n){
                var id_str = $(n).attr('id').replace(find_id,newid);
                $(n).attr('id',id_str);
            });


            //如果是编辑器 则先把里面的 子元素 删除，否则会渲染两次
            if(component_name == 'ueditor'){$('#'+newid).children().remove();}

            setting.uniqid_id = setting.set.id = newid;
            var func = window[''+oldid+''];

            func(setting);
        }

        form.render(); //表单渲染
        link.init();  //ajax链接渲染

    }



</script>





{/block}




